<template>
                <div class="content-wrapper">
                    <h3 style="width:80px;text-align:center;margin:10px 0;">基本信息</h3>
                    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">

                            <FormItem label="活动名称" prop="name">
                                <Row>
                                     <Col span="4"><Input size="large" v-model="formValidate.name" placeholder="请输入姓名"></Input></Col>
                                </Row>
                            </FormItem>

                            <FormItem label="活动目的" prop="mail">
                                <Row>
                                     <Col span="4"><Input size="large" v-model="formValidate.mail" placeholder="请输入邮箱"></Input></Input></Col>
                                </Row>                      

                            </FormItem>

                            <FormItem label="活动日期">
                                <Row>
                                    <Col span="4">
                                        <FormItem prop="date">
                                            <DatePicker type="date" placeholder="选择日期" size="large" v-model="formValidate.date" style="width:100%"></DatePicker>
                                        </FormItem>
                                    </Col>
                                    <Col span="1" style="text-align: center">至</Col>
                                    <Col span="4">
                                        <FormItem prop="time">
                                            <DatePicker type="date" placeholder="选择日期" size="large" v-model="formValidate.time" style="width:100%"></DatePicker>
                                        </FormItem>
                                    </Col>
                                </Row>
                            </FormItem>

                            <FormItem label="活动说明" prop="desc">
                                <Row>
                                    <Col span="9"><Input size="large" v-model="formValidate.desc" type="textarea" :autosize="{minRows: 5,maxRows: 10}" placeholder="请输入..."></Input></Col> 
                                </Row>       
                            </FormItem>

                            <FormItem label="申请部门" prop="mail">
                                <Row>
                                     <Col span="4"><Cascader size="large" :data="data4" :load-data="loadData"></Cascader></Col>
                                </Row>                                                  
                            </FormItem>

                            <FormItem label="预算周期" prop="mail">
                                <Row>
                                     <Col span="4">
                                        <Select v-model="model1">
                                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                        </Select>
                                     </Col>
                                </Row>                          
                            </FormItem>

                            <FormItem label="申请人" prop="mail">
                                <Row>
                                     <Col span="4">fenqile</Col>
                                </Row>
                            </FormItem>

                            <FormItem label="预算活动" prop="mail">
                                <Row>
                                     <Col span="4"><Input size="large" v-model="formValidate.mail" placeholder="请输入邮箱"></Input></Col>
                                </Row>
                            </FormItem>                 

                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formValidate')">创建活动立项</Button>
                                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                            </FormItem>
                    </Form>
            </div>
</template>
<script>
    import ProductMenu from '../../common/ProductMenu';
    export default {
        data () {
            return {
            	data4: [
                    {
                        value: 'beijing',
                        label: '北京',
                        children: [],
                        loading: false
                    },
                    {
                        value: 'hangzhou',
                        label: '杭州',
                        children: [],
                        loading:false
                    }
                ],
				cityList: [
					{
					    value: 'beijing',
					    label: '北京市'
					},
					{
					    value: 'shanghai',
					    label: '上海市'
					},
					{
					    value: 'shenzhen',
					    label: '深圳市'
					},
					{
					    value: 'hangzhou',
					    label: '杭州市'
					},
					{
					    value: 'nanjing',
					    label: '南京市'
					},
					{
					    value: 'chongqing',
					    label: '重庆市'
					}
				],
				model1: '',                
                formValidate: {
                    name: '',
                    mail: '',
                    city: '',
                    gender: '',
                    interest: [],
                    date: '',
                    time: '',
                    desc: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    mail: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' },
                        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                    ],
                    city: [
                        { required: true, message: '请选择城市', trigger: 'change' }
                    ],
                    gender: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    interest: [
                        { required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
                        { type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
                    ],
                    date: [
                        { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
                    ],
                    time: [
                        { required: true, type: 'date', message: '请选择时间', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请输入个人介绍', trigger: 'blur' },
                        { type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
            	this.$router.push({path:'/activitysearch'});
                // this.$refs[name].validate((valid) => {
                //     if (valid) {
                //         this.$Message.success('提交成功!');
                //     } else {
                //         this.$Message.error('表单验证失败!');
                //     }
                // })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            loadData (item, callback) {
                item.loading = true;
                setTimeout(() => {
                    if (item.value === 'beijing') {
                        item.children = [
                            {
                                value: 'talkingdata',
                                label: 'TalkingData'
                            },
                            {
                                value: 'baidu',
                                label: '百度'
                            },
                            {
                                value: 'sina',
                                label: '新浪'
                            }
                        ];
                    } else if (item.value === 'hangzhou') {
                        item.children = [
                            {
                                value: 'ali',
                                label: '阿里巴巴'
                            },
                            {
                                value: '163',
                                label: '网易'
                            }
                        ];
                    }
                    item.loading = false;
                    callback();
                }, 1000);
            }           
        },
        components:{
          ProductMenu
        },        
    }
</script>

<style scoped>
   .content-wrapper{
   	  padding:25px;
   }
   .search-title{
   	  margin-top:20px;
   }
</style>